<template>
  <div class="outer">
    <div class="inner">
      <div class="inner_content">
        <div class="head_title">
          <div>时间戳：{{ data.createTime }}</div>
          <div @click.stop="thinkabout">返回</div>
        </div>

        <div class="content">
          <div class="img">
            <div class="mask">
              <div class="title">{{ data.title }}</div>
              <div class="author">作者：{{ data.publisher }}</div>
              <div class="descrition">
                {{ data.description }}
              </div>
            </div>
          </div>
          <div class="hash">
            <div>
              <div class="hash_name">作品ID:</div>
              <div class="hash_code">{{ data.tokenId }}</div>
            </div>
            <div>
              <div class="hash_name">交易Hash:</div>
              <div class="hash_code">{{ data.hashCode }}</div>
            </div>
            <div>
              <div class="hash_name">智能合约:</div>
              <div class="hash_code">{{ data.contractId }}</div>
            </div>
            <div>
              <div class="hash_name">区块Hash:</div>
              <div class="hash_code">{{ data.blockHash }}</div>
            </div>
          </div>
          <div class="pay">
            <div v-if="data.price == null ">免费</div>
            <div v-else>￥{{ data.price }}</div>
            <div @click.stop="to_pay_page">付款</div>
            <div @click.stop="thinkabout">再想想</div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import {ScriptWritingBQZRList} from "../../api/ScriptWriting";
import {ScriptWritingDetail} from "../../api/ScriptWriting";


export default {
  name: "trade",
  data() {
    return {
      data: {},
    }
  },
  created() {

    ScriptWritingDetail({id: this.$route.query.id}).then(res => {
      console.log('hhhhhhhhhhhhh', res)
      this.data = res.data
    })

  },
  methods: {
    to_pay_page() {
      this.$router.push({path: '/pay', query: {id: this.$route.query.id}})
    },
    thinkabout() {
      this.$router.back()
    }
  }
}
</script>

<style scoped lang="scss">
.outer {
  width: 100%;
  overflow: hidden;
}

.inner {
  width: 1000px;
  margin: 0px auto;
  /*padding: 31px 20px 27px 20px;*/
  overflow: hidden;
}

.inner_content {
  width: 960px;
  margin: 0px auto;
  margin-top: 31px;
  margin-bottom: 27px;
  overflow: hidden;
}

.head_title {
  width: 960px;
  height: 41px;
  background: #2EB0C6;
  border: 1px solid #EBEBEB;

  font-size: 13px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 41px;
  /*padding-left: 23px;*/
  display: flex;
  justify-content: space-between;

  div:nth-of-type(1){
    margin-left: 23px;
  }

  div:nth-of-type(2){
    margin-right: 23px;
    cursor: pointer;
  }

}

.content {
  display: flex;
  justify-content: space-between;
}

.img {
  width: 190px;
  height: 190px;
  border-radius: 4px;
  background: url("https://img2.baidu.com/it/u=3666548066,2508071679&fm=26&fmt=auto") 100% 100% no-repeat;
  margin-top: 25px;
}

.mask {
  width: 190px;
  height: 190px;
  background: #000000;
  opacity: 0.5;
  border-radius: 4px;
  overflow: hidden;
}

.mask div {
  text-align: center;
  color: #FFFFFF;
}

.title {
  margin-top: 53px;
  font-size: 12px;
  line-height: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
}

.author {
  margin-top: 10px;
  font-size: 10px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
}

.descrition {
  margin-top: 32px;
  font-size: 10px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;

  /*多行文本溢出省略号*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.hash {
  /*width: 490px;*/
  width: 65%;
  /*margin-left: -35px;*/
  /*margin-top: 32px;*/
  margin-top: 30px;
  margin-left: 30px;
}

.hash > div {
  display: flex;
  width: 100%;
  margin-top: 30px;
}
.hash>div:nth-of-type(1){
  margin-top: 0px;
}
.hash_name {
  /*width: 60px;*/
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 20px;
}

.hash_code {
  width: 85%;
  /*width: 320px;*/
  margin-left: 11px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #2EB0C6;
  line-height: 20px;

  /*文本溢出省略号*/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pay {
  width: 177px;
  border-left: 1px solid #EEEEEE;
}

.pay > div:nth-of-type(1) {
  text-align: center;
  font-size: 14px;
  line-height: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #FF4444;

  margin-top: 59px;
}

.pay > div:nth-of-type(2) {
  width: 80px;
  height: 30px;
  background: #2EB0C6;
  border-radius: 4px;

  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
  text-align: center;
  line-height: 30px;

  cursor: pointer;
  margin: 0px auto;
  margin-top: 17px;
}

.pay > div:nth-of-type(3) {
  width: 82px;
  height: 32px;
  background: #FFFFFF;
  border: 1px solid #999999;
  border-radius: 4px;

  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  line-height: 32px;
  text-align: center;
  margin: 0px auto;
  margin-top: 13px;
  cursor: pointer;
}
</style>
